<template>
  <div class="view">
    <el-row class="handle-box">
      <span>{{$t("monitor.transmissionName")}}：</span>
      <el-input
        v-model="searchname"
        :placeholder="$t('public.text')"
        clearable
      ></el-input>
      <div class="seacths">
      <el-button type="primary" id="btn" @click="search" icon="el-icon-search">{{ $t("public.search") }}</el-button>
     </div>
    </el-row>
    <div class="tablebox">
    <template>
      <el-table :data="tables" size="mini" stripe class="tablefisbox">
           <el-table-column
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column prop="id" :label="$t('public.number')" min-width="65">
        </el-table-column>
        <el-table-column prop="conveyer" min-width="135" :label="$t('monitor.transmission')">
        </el-table-column>
        <el-table-column prop="wellname" min-width="130" :label="$t('monitor.WellName')">
        </el-table-column>
        <el-table-column prop="platformname" :label="$t('monitor.PlatformName')" min-width="120">
        </el-table-column>
        <el-table-column prop="welltype" min-width="80" :label="$t('monitor.wellType')">
        </el-table-column>
        <el-table-column prop="netstat" min-width="80" :label="$t('monitor.NetworkStatus')">
        </el-table-column>
        <el-table-column prop="status" min-width="80" :label="$t('monitor.state')">
        </el-table-column>
        <el-table-column :label="$t('public.operation')" min-width="565">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-search"
              round
              size="mini"
              @click="handleLook(scope.$index, scope.row)"
              >{{$t("public.look")}}</el-button
            >

            <el-button
              type="warning"
              icon="el-icon-edit"
              round
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >{{$t("public.edit")}}</el-button
            >
            <el-button
              type="success"
              icon="el-icon-setting"
              round
              size="mini"
              @click="handleSet(scope.$index, scope.row)"
              >{{$t("monitor.configure")}}</el-button
            >
            <el-button
              type="success"
              icon="el-icon-download"
              round
              size="mini"
              @click="handleImport(scope.$index, scope.row)"
              >{{$t("monitor.impoetConfigFile")}}</el-button
            >
            <el-button
              type="success"
              icon="el-icon-upload2"
              round
              size="mini"
              @click="handleExport(scope.$index, scope.row)"
              >{{$t("monitor.exportConfigFile")}}</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              class="red"
              round
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
              >{{$t("public.del")}}</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              class="red"
              round
              size="mini"
              @click="handleDiscard(scope.$index, scope.row)"
              >{{$t("monitor.scrap")}}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-col class="pages">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageSize"
        :total="total"
      >
      </el-pagination>
    </el-col>
    </div>
    <!--配置查看编辑窗口界面-->
    <el-dialog
      class="dialogs"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogMonitorVisible"
      :close-on-click-modal="false"
      width="480px"
      top="6vh"
      center
    >
      <el-form ref="monitorForm" style="margin-top: 20px;" :model="monitorForm">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('monitor.TransmissionMachine')+'：'" prop="TransmissionMachine">
              <el-input readonly="readonly" class="lookformtext" v-model="monitorForm.TransmissionMachine"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('monitor.dateOfBirth')+'：'" prop="dateOfBirth">
              <el-input readonly="readonly" class="lookformtext" v-model="monitorForm.dateOfBirth"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('monitor.IpAddress')+'：'" prop="IpAddress">
              <el-input :readonly="dialogStatus == 'update'?false:true" class="lookformtext" v-model="monitorForm.IpAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('monitor.region')+'：'" prop="region">
              <el-input :readonly="dialogStatus == 'update'?false:true" class="lookformtext" v-model="monitorForm.region"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('monitor.WellName')+'：'" prop="WellName">
              <el-input readonly="readonly" class="lookformtext" v-model="monitorForm.WellName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('monitor.PlatformName')+'：'" prop="PlatformName">
              <el-input readonly="readonly" class="lookformtext" v-model="monitorForm.PlatformName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('monitor.MineType')+'：'" prop="MineType">
              <el-input readonly="readonly" class="lookformtext" v-model="monitorForm.MineType"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('monitor.NetworkStatus')+'：'" prop="NetworkStatus">
              <el-input readonly="readonly" class="lookformtext" v-model="monitorForm.NetworkStatus"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('monitor.state')+'：'" prop="state">
              <el-input readonly="readonly" class="lookformtext" v-model="monitorForm.state"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogMonitorVisible = false" type="success">{{
          $t("public.closebtn")
        }}</el-button>

        <el-button
        style="margin-left: 20px;"
          v-if="dialogStatus == 'update'"
          type="primary"
          @click="updateData"
          >{{ $t("public.changebtn") }}</el-button
        >
      </div>
    </el-dialog>
    <!--配置窗口界面-->
    <el-dialog
      class="dialogs"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="800px"
      top="6vh"
      center
    >
      <el-tabs v-model="activeName" class="configmodel" @tab-click="handleClick">
        <el-tab-pane :label="$t('monitor.database')" name="first">
          <el-form ref="editForm" style="margin-top: 20px;" :model="editForm" :rules="editFormRules">
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.IpAddress')+'：'" prop="IpAddress">
                  <el-input v-model="editForm.IpAddress"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.RealName')+'：'" prop="RealName">
                  <el-input v-model="editForm.RealName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.UserName')+'：'" prop="UserName">
                  <el-input v-model="editForm.UserName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.Password')+'：'" prop="Password">
                  <el-input show-password v-model="editForm.Password"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.ListOfWells')+'：'" prop="ListOfWells">
                  <el-select v-model="editForm.ListOfWells" :placeholder="$t('public.select')">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-checkbox v-model="editForm.checked">
                <span>{{ $t('monitor.PipelineTime') }}：</span>
                <el-input style="width:200px" v-model="editForm.PipelineTime"></el-input>
                </el-checkbox>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t('monitor.ReceivingPort')" name="second">
          <el-form ref="InterfaceForm" style="margin-top: 24px;" :model="InterfaceForm" :rules="InterfaceFormRules">
            <el-row class="borlr">
              <el-col :span="24" class="martopf">
                 <el-divider content-position="left">
                  <div class="fontdabold">
                    {{ $t('monitor.ReceivingPortName') }}
                  </div>
                </el-divider>
              </el-col>
            </el-row>
            <el-row class="borlr borbtm">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.InterfaceName')+'：'" prop="InterfaceName">
                  <el-input v-model="InterfaceForm.InterfaceName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.remarks')+'：'" prop="remarks">
                  <el-input v-model="InterfaceForm.remarks"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="borlr" style="margin-top: 20px;">
              <el-col :span="24" class="martopf">
                 <el-divider content-position="left">
                  <div class="fontdabold">
                    {{ $t('monitor.connections') }}
                  </div>
                </el-divider>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.ConnectionMode')+'：'" prop="ConnectionMode">
                  <el-select v-model="InterfaceForm.ConnectionMode" :placeholder="$t('public.select')">
                    <el-option
                      v-for="item in Connectionoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.COMPort')+'：'" prop="COMPort">
                  <el-input v-model="InterfaceForm.COMPort"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.IpAddress')+'：'" prop="IpAddress">
                  <el-input v-model="InterfaceForm.IpAddress"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.BaudRate')+'：'" prop="BaudRate">
                  <el-input v-model="InterfaceForm.BaudRate"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="borlr borbtm">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.IPPort')+'：'" prop="IPPort">
                  <el-input v-model="InterfaceForm.IPPort"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-row class="borlr" style="margin-top: 20px;">
              <el-col :span="24" class="martopf">
                 <el-divider content-position="left">
                  <div class="fontdabold">
                  {{ $t('monitor.OtherInformation') }}
                </div>
                </el-divider>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12" style="text-align: center;padding-top: 5px;">
                <el-input style="width:155px;padding-right: 10px;" v-model="InterfaceForm.UseLocalTimeZone" :placeholder="$t('monitor.UseLocalTimeZone')"></el-input>
                <el-checkbox v-model="InterfaceForm.checkeds">
                <span>{{ $t('monitor.LocalTimeZone') }}</span>
                </el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.ReceivingDataTable')+'：'" prop="ReceivingDataTable">
                  <el-input v-model="InterfaceForm.ReceivingDataTable"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12">
               <el-form-item :label="$t('monitor.LocalTimeZoneS')+'：'" prop="LocalTimeZoneS">
                  <el-select v-model="InterfaceForm.LocalTimeZoneS" :placeholder="$t('public.select')">
                    <el-option
                      v-for="item in LocalTimeoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12"  style="text-align: left;padding-left: 20px;">
                <el-input style="width: 220px;padding-right: 10px;" v-model="InterfaceForm.TableFiltering" :placeholder="$t('monitor.TableFiltering')"></el-input>
                <el-checkbox v-model="InterfaceForm.FilteringChecked">
                <span>{{ $t('monitor.DataFiltering') }}</span>
                </el-checkbox>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12">
               <el-form-item :label="$t('monitor.TimeFormat')+'：'" prop="TimeFormat">
                  <el-select v-model="InterfaceForm.TimeFormat" :placeholder="$t('public.select')">
                    <el-option
                      v-for="item in Timeoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-row class="borlr borbtm">
              <el-col :span="12">
               <el-form-item :label="$t('monitor.DataTimeZone')+'：'" prop="DataTimeZone">
                  <el-select v-model="InterfaceForm.DataTimeZone" :placeholder="$t('public.select')">
                    <el-option
                      v-for="item in Zoneoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t('monitor.TransmitterConfiguration')" name="third">
          <el-form ref="SendingPortForm" style="margin-top: 24px;" :model="SendingPortForm" :rules="SendingPortRules">
            <el-row class="borlr">
              <el-col :span="24" class="martopf">
                 <el-divider content-position="left">
                  <div class="fontdabold">
                    {{ $t('monitor.SenderName') }}
                  </div>
                </el-divider>
              </el-col>
            </el-row>
            <el-row class="borlr borbtm">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.InterfaceName')+'：'" prop="InterfaceName">
                  <el-input v-model="SendingPortForm.InterfaceName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.remarks')+'：'" prop="remarks">
                  <el-input v-model="SendingPortForm.remarks"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="borlr" style="margin-top: 20px;">
              <el-col :span="24" class="martopf">
                <el-divider content-position="left">
                  <div class="fontdabold">
                  {{ $t('monitor.connections') }}
                  </div>
                </el-divider>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.ConnectionMode')+'：'" prop="ConnectionMode">
                  <el-select v-model="SendingPortForm.ConnectionMode" :placeholder="$t('public.select')">
                    <el-option
                      v-for="item in Connectionoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.COMPort')+'：'" prop="COMPort">
                  <el-input v-model="SendingPortForm.COMPort"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.IpAddress')+'：'" prop="IpAddress">
                  <el-input v-model="SendingPortForm.IpAddress"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.BaudRate')+'：'" prop="BaudRate">
                  <el-input v-model="SendingPortForm.BaudRate"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="borlr borbtm">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.IPPort')+'：'" prop="IPPort">
                  <el-input v-model="SendingPortForm.IPPort"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
             <el-row class="borlr" style="margin-top: 20px;">
                <el-col :span="24" class="martopf">
                <el-divider content-position="left">
                  <div class="fontdabold">
                    {{ $t('monitor.OtherInformation') }}
                  </div>
                </el-divider>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12" style="text-align: center;padding-top: 5px;">
                <el-input style="width:155px;padding-right: 10px;" v-model="InterfaceForm.UseLocalTimeZone" :placeholder="$t('monitor.UseLocalTimeZone')"></el-input>
                <el-radio v-model="SendingPortForm.radio" label="1">
                <span>{{ $t('monitor.WisoStandard') }}</span>
                </el-radio>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-row class="borlr borbtm" style="padding-bottom: 20px;">
              <el-col :span="12" style="text-align: center;padding-top: 23px;">
                <el-input style="width: 155px;padding-right: 10px;margin-left: -10px;" v-model="InterfaceForm.TableFiltering" :placeholder="$t('monitor.TableFiltering')"></el-input>
                <el-checkbox v-model="SendingPortForm.FilteringChecked">
                <span>{{ $t('monitor.DataFiltering') }}</span>
                </el-checkbox>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t('monitor.realTimeData')" name="fourth">
          <el-form ref="SendingPortForm" :model="SendingPortForm" style="margin-top: 24px;" :rules="SendingPortFormRules">
            <el-row class="borlr">
              <el-col :span="24" class="martopf">
                 <el-divider content-position="left">
                  <div class="fontdabold">
                    {{ $t('monitor.SenderPlatform') }}:{{ $t('monitor.DatabaseConfiguration') }}
                  </div>
                </el-divider>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.IpAddress')+'：'" prop="IpAddress">
                  <el-input v-model="SenderPlatform.IpAddress"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.RealName')+'：'" prop="RealName">
                  <el-input v-model="SenderPlatform.RealName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="borlr">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.UserName')+'：'" prop="UserName">
                  <el-input v-model="SenderPlatform.UserName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-input style="width: 280px;margin-left: 60px;" :placeholder="$t('monitor.WellName')+':'+$t('monitor.TSexample')" v-model="SenderPlatform.WellName"></el-input>
              </el-col>
            </el-row>
            <el-row class="borlr borbtm">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.Password')+'：'" prop="Password">
                  <el-input show-password v-model="SenderPlatform.Password"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-row class="borlr martop">
              <el-col :span="24" class="martopf">
                 <el-divider content-position="left">
                  <div class="fontdabold">
                    {{ $t('monitor.Receiver') }}:{{ $t('monitor.WebServerConfiguration') }}
                  </div>
                </el-divider>
              </el-col>
            </el-row>
            <el-row class="borlr borbtm">
              <el-col :span="12">
                <el-form-item :label="$t('monitor.ReceivingAddress')+'：'" prop="ReceivingAddress">
                  <el-input v-model="SenderPlatform.ReceivingAddress"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('monitor.WellName')+'：'" prop="WellName">
                  <el-input v-model="SenderPlatform.WellName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="kssjcss">
                  {{$t("monitor.startTime") + ':' + startTime}}
                </div>
              </el-col>
            </el-row>
            
            <el-row class="borders">
              <el-col :span="21">
                <el-checkbox-group v-model="checkList" class="checkcss">
                  <el-checkbox label="复选框 A"></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                   <el-checkbox label="复选框 A"></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                   <el-checkbox label="复选框 A"></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                   <el-checkbox label="复选框 A"></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                   <el-checkbox label="复选框 A"></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                   <el-checkbox label="复选框 A"></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                   <el-checkbox label="复选框 A"></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                </el-checkbox-group>
              </el-col>
              <el-col :span="3">
                <div class="anniuzu">
                  <el-button type="primary">
                    {{$t("monitor.DataHandling")}}
                  </el-button>
                </div>
                <div class="anniuzu">
                  <el-button type="primary">
                    {{$t("monitor.RestartHandling")}}
                  </el-button>
                </div>
                <div class="anniuzu">
                  <el-button type="primary">
                    {{$t("monitor.loadConfiguration")}}
                  </el-button>
                </div>
                <div class="anniuzu">
                  <el-button type="primary">
                    {{$t("monitor.SaveConfiguration")}}
                  </el-button>
                </div>
              </el-col>
            </el-row>
            
            <el-row style="margin-top: 15px;">
              <el-col :span="4">
              </el-col>
              <el-col :span="5">
               <div class="anniuzu">
                  <el-button type="primary">
                    {{$t("monitor.WellDesignTrajectorySynchronization")}}
                  </el-button>
                </div>
              </el-col>
              <el-col :span="5">
               <div class="anniuzu">
                  <el-button type="primary">
                    {{$t("monitor.DocumentTableSynchronization")}}
                  </el-button>
                </div>
              </el-col>
              <el-col :span="5">
               <div class="anniuzu">
                  <el-button type="primary">
                    {{$t("monitor.ConfigurationTableSynchronization")}}
                  </el-button>
                </div>
              </el-col>
              <el-col :span="5">
               <div class="anniuzu">
                  <el-button type="primary">
                    {{$t("monitor.LithologyTableSynchronization")}}
                  </el-button>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-table
                  :data="tableNameData"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="biaoming"
                    label="表名"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="shuliang"
                    label="数量"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="time">
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
       
     
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 40px;" @click.native="dialogFormVisible = false" type="success">{{
          $t("public.cancelbtn")
        }}</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          type="primary"
          @click="createData"
          >{{ $t("public.savebtn") }}</el-button
        >
        <el-button v-else type="primary" @click="updateData">{{
          $t("public.changebtn")
        }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

export default {
  data() {
    return {
      addVisible: false,
      editVisible: false,
      editform: {},
      addform: {},
      currentPage4: 1, //当前页数
      ruleValidate: {
        name: { required: true, message: "不能为空", trigger: "blur" },
        type: { required: true, message: "不能为空", trigger: "blur" },
      },
      // searchform: {
      //   name: "",
      //   type: "",
      // },
      // searchist:[],
      idx: -1,
      pageTotal: 0,
      optionwelltype: [
        {
          value: "选项1",
          label: "卡钻",
        },
        {
          value: "选项2",
          label: "井涌",
        },
        {
          value: "选项3",
          label: "井漏",
        },
        {
          value: "选项4",
          label: "溢流",
        },
        {
          value: "选项5",
          label: "掉钻具",
        },
      ],
      value: "",
      tableData: [
        {
          id: 1,
          conveyer: "MS-UMZGAXO3457",
          wellname: "PL19-3-B09ST01",
          platformname: "海洋石油944",
          welltype: "钻井中",
          netstat: "很好",
          createdate: "2020-11-23 12:05:39",
          status: "在工作中",
          handle: "隐藏",
        },
        {
          id: 2,
          conveyer: "MS-UMZGAXO3457",
          wellname: "PL19-3-B09ST01",
          platformname: "海洋石油944",
          welltype: "钻井中",
          netstat: "很好",
          createdate: "2020-11-23 12:05:39",
          status: "在线",
          handle: "隐藏",
        },
        {
          id: 3,
          conveyer: "MS-UMZGAXO3457",
          wellname: "PL19-3-B09ST01",
          platformname: "海洋石油944",
          welltype: "钻井中",
          netstat: "阻塞",
          createdate: "2020-11-23 12:05:39",
          status: "在线",
        },
        {
          id: 4,
          conveyer: "MS-UMZGAXO3457",
          wellname: "PL19-3-B09ST01",
          platformname: "海洋石油944",
          welltype: "井涌",
          netstat: "很好",
          createdate: "2020-11-23 12:05:39",
          status: "显示",
          handle: "隐藏",
        },
        {
          id: 5,
          conveyer: "MS-UMZGAXO3457",
          wellname: "PL19-3-B09ST01",
          platformname: "海洋石油944",
          welltype: "钻井中",
          netstat: "很好",
          createdate: "2020-11-23 12:05:39",
          status: "显示",
          handle: "隐藏",
        },
        {
          id: 6,
          conveyer: "MS-UMZGAXO3457",
          wellname: "PL19-3-B09ST01",
          platformname: "海洋石油944",
          welltype: "井涌",
          netstat: "很好",
          createdate: "2020-11-23 12:05:39",
          status: "显示",
          handle: "隐藏",
        },
      ],
      searchname: "",
      //是否必填项
      editFormRules: {
       IpAddress: [
          { required: true, message: "请输入IP地址", trigger: "blur" },
        ],
        Password: [
          { validator: this.validateMobile, trigger: "blur" },
        ],
        UserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        RealName: [
          { required: true, message: "请输入实名例", trigger: "blur" },
        ],
        ListOfWells: [
          { required: true, message: "请选择井列表", trigger: "blur" },
        ]
      },
      InterfaceFormRules:{
        InterfaceName: [
          { required: true, message: "请输入接收名称", trigger: "blur" },
        ],
        ConnectionMode: [
          { required: true, message: "请输入连接使用模式", trigger: "blur" },
        ],
        IpAddress: [
          { required: true, message: "请输入IP地址", trigger: "blur" },
        ],
        IPPort: [
          { required: true, message: "请输入IP端口", trigger: "blur" },
        ]
      },
      SendingPortRules:{
        InterfaceName: [
          { required: true, message: "请输入接收名称", trigger: "blur" },
        ],
        ConnectionMode: [
          { required: true, message: "请输入连接使用模式", trigger: "blur" },
        ],
        IpAddress: [
          { required: true, message: "请输入IP地址", trigger: "blur" },
        ],
        IPPort: [
          { required: true, message: "请输入IP端口", trigger: "blur" },
        ]
      },
      SendingPortFormRules:{
        IpAddress: [
          { required: true, message: "请输入IP地址", trigger: "blur" },
        ],
        Password: [
          { validator: this.validateMobile, trigger: "blur" },
        ],
        UserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        ReceivingAddress: [
          { required: true, message: "请输入接收地址", trigger: "blur" },
        ]
      },
      textMap: {
        //添加与编辑界面
        update: this.$t('public.edit'),
        create: this.$t('public.create'),
        look:this.$t('public.look'),
        configure:this.$t('monitor.configure')
      },
      dialogFormVisible: false, //弹窗
      dialogMonitorVisible:false,//监控管理查看
      options: [{
        value: 'TS 20110922 001',
        label: 'TS 20110922 001'
      }, {
        value: 'TS 20110922 002',
        label: 'TS 20110922 002'
      }],
      editForm : {
        userId: "",
        database: "",
        IpAddress: "",
        RealName: "",
        UserName: "",
        Password: "",
        ListOfWells: "",
        PipelineTime: "",
        checked:false
      },
      InterfaceForm:{
        InterfaceName:"",
        remarks:"",
        ConnectionMode:"",
        COMPort:"",
        IpAddress:"",
        BaudRate:"",
        IPPort:"",
        checkeds:false,
        ReceivingDataTable:"",
        LocalTimeZoneS:"",
        FilteringChecked:"",
        TimeFormat:"",
        DataTimeZone:""
      },
      SendingPortForm:{
        InterfaceName:"",
        remarks:"",
        ConnectionMode:"",
        COMPort:"",
        IpAddress:"",
        BaudRate:"",
        IPPort:"",
        radio:"1",
        TableFiltering:"",
        FilteringChecked:false
      },
      SenderPlatform:{
        IpAddress:"",
        RealName:"",
        UserName:"",
        Password:"",
        ReceivingAddress:"",
        WellName:""
      },
      monitorForm:{
        TransmissionMachine:"",
        dateOfBirth:"",
        IpAddress:"",
        region:"",
        WellName:"",
        PlatformName:"",
        MineType:"",
        NetworkStatus:"",
        state:""
      },
      activeName: 'first',
      LocalTimeoptions:[{
        value: '东8区北京台北',
        label: '东8区北京台北'
      }],
      Timeoptions:[{
        value: 'yyyyMMdd',
        label: 'yyyyMMdd'
      }],
      Zoneoptions:[],
      rowData:[],
      Connectionoptions:[{label:"TCP/IP",value:"TCP/IP"}],
      COMPortoptions:[],
      BaudRateoptions:[],
      checkList:[],
      tableNameData:[],
      startTime:"",
      // list: [],
      // searchKey: {},

      // tables: [], //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页
      dialogStatus:'look',
      
    };
  },
  mounted() {
    document.onkeydown = function (event) {
      // 回车实现点击功能
      var e = event || window.event;
      if (e && e.keyCode == 13) {
        $("#btn").click();
      }
    };
  },
  watch: {
    // watch实时监控输入内容,如果没有任何内容,则显示整个列表
    searchname(current, old) {
      let that = this;
      if (current == "") {
        that.tableData = that.tableData;
      }
    },
  },
  computed: {
    tables() {
      // this.$set(this.query, 'pageIndex', 1);
      // this.getData();
      const search = this.searchname;
      // const value = this.value;
      if (search) {
        return this.tableData.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    // getData() {
    //     fetchData(this.query).then(res => {
    //         console.log(res);
    //         this.tableData = res.list;
    //         this.pageTotal = res.pageTotal || 50;
    //     });
    // },

    //模糊搜索
    search() {
      let that = this;
      if (that.searchname === "" || typeof that.searchname == "undefined") {
        that.list = that.tableData;
      } else {
        that.list = [];
        that.tableData.map(function (item) {
          console.log(typeof item.id);
          if (item.name.search(that.searchData) != -1) {
            // 筛选条件
            that.list.push(item);
          }
        });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    updateData(){

    },
    handleLook(index,row){
      this.dialogStatus = "look";
      this.dialogMonitorVisible = true;
      this.monitorForm = {
        userId: row.id||"",
        TransmissionMachine: row.conveyer||"",
        dateOfBirth: row.createdate||"",
        IpAddress: row.IpAddress||"",
        region: row.region||"",
        WellName: row.wellname||"",
        PlatformName: row.platformname||"",
        MineType: row.welltype||"",
        NetworkStatus:row.netstat||"",
        state: row.status||"",
      };
    },
    handleEdit(index,row){
      this.dialogStatus = "update";
      this.dialogMonitorVisible = true;
      this.monitorForm = {
        userId: row.id||"",
        TransmissionMachine: row.conveyer||"",
        dateOfBirth: row.createdate||"",
        IpAddress: row.IpAddress||"",
        region: row.region||"",
        WellName: row.wellname||"",
        PlatformName: row.platformname||"",
        MineType: row.welltype||"",
        NetworkStatus:row.netstat||"",
        state: row.status||"",
      };
    },
    handleSet(index,row){
      let date= new Date();
      let time=this.$moment(date).format("YYYY年MM月DD日 HH:mm:ss");
      this.startTime=time;
      this.dialogStatus = "configure";
      this.dialogFormVisible = true;
      this.rowData=row;
      this.editForm = {
        userId: row.userId,
        database: row.database||"",
        IpAddress: row.IpAddress||"",
        RealName: row.RealName||"",
        UserName: row.UserName||"",
        Password: row.Password||"",
        ListOfWells: row.ListOfWells||"",
        PipelineTime: row.PipelineTime||"",
        checked:row.checked||false
      };
    },
    //密码格式验证
    validateMobile(rule, value, callback) {
      var reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、])[A-Za-z\d`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]{8,18}$/;
      if (value !== "") {
        if (value.length < 8) {
          callback(new Error("请输入至少8位的密码"));
        } else if (!reg.test(value)) {
          callback(new Error("密码必须包含字母、数字和特殊字符"));
        } else {
          callback();
        }
      } else if (this.dialogStatus == "create") {
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    },
    handleClick(tab, event){
      if(tab.index=="0"){
        this.editForm = {
          userId: this.rowData.userId,
          database: this.rowData.database||"",
          IpAddress: this.rowData.IpAddress||"",
          RealName: this.rowData.RealName||"",
          UserName: this.rowData.UserName||"",
          Password: this.rowData.Password||"",
          ListOfWells: this.rowData.ListOfWells||"",
          PipelineTime: this.rowData.PipelineTime||"",
          checked:this.rowData.checked||false
        };
      }else if(tab.index=="1"){
        this.InterfaceForm = {
          userId: this.rowData.userId||"",
          InterfaceName:this.rowData.InterfaceName||"",
          remarks:this.rowData.remarks||"",
          ConnectionMode:this.rowData.ConnectionMode||"",
          COMPort:this.rowData.COMPort||"",
          IpAddress:this.rowData.IpAddress||"",
          BaudRate:this.rowData.BaudRate||"",
          IPPort:this.rowData.IPPort||"",
          checkeds:this.rowData.checkeds||false,
          ReceivingDataTable:this.rowData.ReceivingDataTable||"",
          LocalTimeZoneS:this.rowData.LocalTimeZoneS||"",
          FilteringChecked:this.rowData.FilteringChecked||"",
          TimeFormat:this.rowData.TimeFormat||"",
          DataTimeZone:this.rowData.DataTimeZone||""
        };
      }else if (tab.index=="2"){
        this.SendingPortForm = {
          userId: this.rowData.userId||"",
          InterfaceName:this.rowData.userId||"",
          remarks:this.rowData.userId||"",
          ConnectionMode:this.rowData.userId||"",
          COMPort:this.rowData.userId||"",
          IpAddress:this.rowData.userId||"",
          BaudRate:this.rowData.userId||"",
          IPPort:this.rowData.userId||"",
          radio:this.rowData.userId||"1",
          TableFiltering:this.rowData.userId||"",
          FilteringChecked:this.rowData.userId||false
        };
      }
    },
  },
};
</script>

<style lang='less' scoped>
.fontdabold{
  font-size: 17px;
  font-weight: bold;
  padding-bottom: 5px;
}
.anniuzu{
  margin-bottom: 15px;
  .el-button{
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
.checkcss{
  .el-checkbox{
    padding-bottom: 20px;
    margin-right: 25px;
  }
}
.borlr{
  border-right-color: rgb(149, 170, 235);
  border-right-style: solid;
  border-right-width: 1px;
  border-left-color: rgb(149, 170, 235);
  border-left-style: solid;
  border-left-width: 1px;
}
.martopf{
  margin-top: -24px;
}
.borbtm{
  border-bottom-style: solid;
  border-bottom-width: 1px;
  margin-bottom: 20px;
  border-bottom-color: rgb(149, 170, 235);
}
.martop{
  margin-top: 15px;
}
.borders{
  border-color: #95aaeb;
  border-style: solid;
  border-width: 1px;
  padding: 15px;
  box-sizing: border-box;
  padding-bottom: 5px;
}
.kssjcss{
  width: 236px;
  float: right;
  margin-bottom: 18px;
  background: rgb(62,134,251);
  padding-left: 10px;
  margin-right: 32px;
  font-size: 14px;
  padding-top: 4px;
  padding-bottom: 5px;
  padding-right: 5px;
  font-weight: bold;
}
.lookformtext{
  width:280px;
}
</style>
<style>
.configmodel > .el-tabs__content{
  height: 590px;
  overflow: auto;
}

.configmodel > .el-tabs__content::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }
.configmodel > .el-tabs__content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
.configmodel > .el-tabs__content::-webkit-scrollbar {
    width: 1px;
    height: 1px;
  }
</style>